<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <title>压力显示</title>
</head>
<body class="container">
<h2>空压机压力
    <small>F1 1线 2线，F2</small>
</h2>
<h2><span class="label label-info">F1</span></h2>
<div class="row">
    <div class="col-md-6 col-sm-12"><h3>1线压力：</h3>
        <h2><span id="Line1" class="label label-primary">0</span></h2></div>
</div>
<div class="row">
    <div class="col-md-6 col-sm-12"><h3>2线压力：</h3>
        <h2><span id="Line2" class="label label-primary">0</span></h2></div>
</div>
<div class="row">
    <div class="col-md-12 col-sm-12">
        <canvas id="canvas"></canvas>
    </div>
</div>
</body>
</html>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/paho-mqtt.js"></script>
<script src="/static/js/Chart.js"></script>
<script src="/static/js/utils.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script>
    var data_L1 = [];
    var data_L2 = [];
    var timeFormat = 'MM/DD/YYYY HH:mm';

    function newDate(days) {
        return moment().add(days, 'd').toDate();
    }

    function newDateString(days) {
        return moment().add(days, 'd').format(timeFormat);
    }

    $(document).ready(function () {
        let client = new Paho.Client("192.168.1.100", 8083, "clientId" + new Date().getTime());
        // 回调
        client.onConnectionLost = onConnectionLost;
        client.onMessageArrived = onMessageArrived;

        // connect the client
        client.connect({onSuccess: onConnect});

        // called when the client connects
        function onConnect() {
            // Once a connection has been made, make a subscription and send a message.
            console.log("连接成功。");
            client.subscribe("/pressure/");
            message = new Paho.Message("Hello");
            message.destinationName = "World";
            client.send(message);
        }

        // called when the client loses its connection
        function onConnectionLost(responseObject) {
            if (responseObject.errorCode !== 0) {
                console.log("onConnectionLost:" + responseObject.errorMessage);
            }
        }

        // called when a message arrives
        function onMessageArrived(message) {
            console.log("onMessageArrived:" + message.payloadString);
            let obj = JSON.parse(message.payloadString);
            let device = obj.device;
            let pressure = obj.pressure / 10;
            //console.log(device);

            $("#" + device).html(pressure);
            // 2
            if (device === "Line2") {
                if (data_L2.length === 1500) {
                    data_L2.pop();
                }
                data_L2.push(pressure);
            }
            // 1
            if (device === "Line1") {
                if (data_L1.length === 1500) {
                    data_L1.pop();
                }
                data_L1.push(pressure);
            }
            myLine.update();
        } // onMessageArrived

        // 曲线图
        var ctx = $('#canvas');

        var config = {
            type: 'line',
            data: {
                labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
                datasets: [{
                    label: 'Line 1',
                    borderColor: window.chartColors.red,
                    fill: false,
                    data: data_L1,
                }, {
                    label: 'Line 2',
                    borderColor: window.chartColors.blue,
                    fill: false,
                    data: data_L2,
                },]
            },
            options: {
                title: {
                    text: 'Chart.js Time Scale'
                },
                scales: {
                    xAxes: [{
                        type: 'time',
						distribution: 'series',
						ticks: {
							source: 'data',
							autoSkip: true
						},
                        scaleLabel: {
                            display: true,
                            labelString: 'Date'
                        }
                    }],
                    yAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: 'bar'
                        },

                        ticks: {
                            min: 3,
                            max: 7,
                            beginAtZero: true,
                        },
                    }]
                },
            }
        };
        var myLine = new Chart(ctx, config);
// end
    });
</script>